<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input id="imageFile" type="file">
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
  const socket     = io('ws://localhost:3232');
  const $imageFile = document.querySelector('#imageFile');

  // 从 input file 中，获取到图片，然后以二进制流的方式发送给服务器
  $imageFile.addEventListener('change', (ev) => {
    const file = ev.target.files[0]

    socket.emit('sendImg', file);

  }, false);

  // 接收服务器传递回来的图片数据。
  socket.on('receiveImg', (buffer) => {
    // 创建一个图片，用来显示从服务传来的图片数据。
    var img = document.createElement("img");

    img.src = 'data:image/jpeg;base64,'+ arrayBufferToBase64(buffer);
    document.body.appendChild(img)
  });

  // 将buffer 转化为base64格式
  function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;

    for (var i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }

    return window.btoa(binary);
  }
</script>
</body>
</html>
